import IntroduceRow from '@/pages/dashboard/components/IntroduceRow';
import PageHeaderContent from '@/pages/dashboard/components/PageHeaderContent';
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Avatar, Card, Col, List, Row, Spin } from 'antd';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import React, { Suspense } from 'react';
import useStyles from './style.style';

dayjs.extend(relativeTime);

interface NoticeVO {
  id: string;
  title: string;
  user: API.UserVO;
  content: string;
  createTime: string;
  updateTime: string;
}

const PageLoading = () => {
  return (
    <div style={{ paddingTop: 100, textAlign: 'center' }}>
      <Spin size="large" />
    </div>
  );
};

const Home: React.FC = () => {
  const { styles } = useStyles();
  const { initialState } = useModel('@@initialState');
  const currentUser = initialState?.currentUser ?? {};
  // const { data } = useRequest(() => {
  //   return listNoticeVoByPageUsingPost({});
  // });
  //
  // const notices = data?.records || [];

  const notices = [
    {
      id: '1',
      title: 'test',
      user: {
        avatar: '',
      },
      content: 'test',
      createTime: 'test',
      updateTime: 'test',
    },
    {
      id: '2',
      title: 'testtest',
      user: {
        avatar: '',
      },
      content: 'testtest',
      createTime: 'testtest',
      updateTime: 'testtest',
    },
  ];

  const renderActivities = (item: NoticeVO) => {
    return (
      <List.Item key={item.id}>
        <List.Item.Meta
          avatar={<Avatar src={item.user?.avatar} />}
          title={<span className={styles.username}>{item.title}</span>}
          description={
            <div>
              <span className={styles.content}>{item.content}</span>
              <span className={styles.datetime} title={item.createTime}>
                {dayjs(item.createTime).fromNow()}
              </span>
            </div>
          }
        />
      </List.Item>
    );
  };

  return (
    <PageContainer content={<PageHeaderContent currentUser={currentUser} />}>
      <Suspense fallback={<PageLoading />}>
        <IntroduceRow />
      </Suspense>
      <Row gutter={24}>
        <Col xl={24} lg={24} md={24} sm={24} xs={24}>
          <Card
            bodyStyle={{
              padding: 0,
            }}
            bordered={false}
            className={styles.activeCard}
            title="系统公告"
          >
            <List<NoticeVO>
              renderItem={(item) => renderActivities(item)}
              dataSource={notices}
              className={styles.activitiesList}
              size="large"
            />
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Home;
